<template>
  <div>
    <el-button @click="handlerAdd">添加数据</el-button>

    <el-dialog
      title="添加数据"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <form-create
        v-model="fApi"
        :rule="rule"
        :option="option"
        @on-submit="handlerSubmit"
      ></form-create>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerSubmit">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { deviceGetField } from "../../utils/api";
export default {
  data() {
    return {
      // 实例对象

      fApi: {},

      dialogVisible: false,
      // rule: [],
      rule: [
        {
          type: "input", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)

          field: "userName", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置

          className: "user-name-dom", // 设置组件的class属性

          title: "用户名称：", // 组件的名称, 选填

          value: "", // 表单组件的字段值(就是表单的value值),自定义组件可以不用设置

          props: {
            placeholder: "请输入用户名称！",

            disabled: false,

            readonly: false,

            clearable: true // 是否显示清空按钮
          },

          validate: [
            {
              trigger: "blur",

              required: true,

              message: "用户名称不能为空！"
            }
          ],

          col: {
            md: { span: 12 }
          }
        },

        {
          type: "input",

          field: "password",

          title: "用户密码：",

          value: "666",

          props: {
            // input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！

            // text	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。

            // button	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）

            // checkbox	定义复选框。

            // color	定义拾色器。

            // date	定义日期字段（带有 calendar 控件）

            // datetime	定义日期字段（带有 calendar 和 time 控件）

            // datetime-local	定义日期字段（带有 calendar 和 time 控件）

            // month	定义日期字段的月（带有 calendar 控件）

            // week	定义日期字段的周（带有 calendar 控件）

            // time	定义日期字段的时、分、秒（带有 time 控件）

            // email	定义用于 e-mail 地址的文本字段

            // file	定义输入字段和 "浏览..." 按钮，供文件上传

            // hidden	定义隐藏输入字段

            // image	定义图像作为提交按钮

            // number	定义带有 spinner 控件的数字字段

            // password	定义密码字段。字段中的字符会被遮蔽。

            // radio	定义单选按钮。

            // range	定义带有 slider 控件的数字字段。

            // reset	定义重置按钮。重置按钮会将所有表单字段重置为初始值。

            // search	定义用于搜索的文本字段。

            // submit	定义提交按钮。提交按钮向服务器发送数据。

            // tel	定义用于电话号码的文本字段。

            // url	定义用于 URL 的文本字段。

            type: "password",

            placeholder: "请输入用户密码！"
          },

          col: {
            md: { span: 12 }
          }
        },

        {
          type: "input",

          field: "summary",

          title: "个人简介：",

          value: "",

          props: {
            type: "textarea",

            rows: 3,

            placeholder: "请输入个人简介！"
          }
        },

        {
          type: "radio",

          field: "sex",

          title: "性 别：",

          value: 0,

          options: [
            { label: "先 生", value: 1 },

            { label: "女 士", value: 2 },

            { label: "人 妖", value: 3, disabled: true },

            { label: "未 知", value: 0 }
          ]
        },

        {
          type: "checkbox",

          field: "hobby",

          title: "爱 好：",

          value: [1, 3],

          options: [
            { label: "吃喝", value: 1 },

            { label: "上班", value: 2, disabled: true },

            { label: "旅游", value: 3 },

            { label: "运动", value: 4 },

            { label: "学习", value: 5, disabled: true }
          ]
        },

        {
          type: "select",

          field: "address",

          title: "想去哪里：",

          value: 6,

          col: {
            //   sx: {span: 24}

            md: { span: 10 }
          },

          options: [
            { label: "内国走走", value: 1 },

            { label: "呆在公司", value: 2, disabled: true },

            { label: "非洲美洲", value: 3 },

            { label: "港澳台游", value: 4 },

            { label: "东南亚游", value: 5 },

            { label: "澳洲旅游", value: 6 },

            { label: "自驾游", value: 7 }
          ]
        },

        {
          type: "select",

          field: "address2",

          title: "想多选点：",

          value: [3, 5],

          col: {
            md: { span: 14 }
          },

          props: {
            multiple: true,

            placement: "bottom"
          },

          options: [
            { label: "内国走走", value: 1 },

            { label: "呆在公司", value: 2, disabled: true },

            { label: "非洲美洲", value: 3 },

            { label: "港澳台游", value: 4 },

            { label: "东南亚游", value: 5 },

            { label: "澳洲旅游", value: 6 },

            { label: "自驾游", value: 7 }
          ]
        }
      ],

      option: {
        // 显示重置表单按扭

        resetBtn: false,

        submitBtn: true
      }
    };
  },

  methods: {
    handlerAdd() {
      this.dialogVisible = !this.dialogVisible;
      // this.getdeviceGetField();
    },
    handleClose() {},
    //  获取表单数据
    getdeviceGetField() {
      const params = {
        fieldId: 1
      };
      this.postRequest(deviceGetField, params).then(res => {
        if (res.code == 200) {
          this.rule = res.data;
        }
      });
    },
    handlerSubmit(formData) {
      // console.log("获取表单中的数据：", JSON.stringify(formData));
    }
  }
};
</script>

<style></style>
